<template>
  <div class="">
    <!-- 头部组件 -->
    <Header title="班长案例" backgroundColor="#0094ff" color="#fff" />

    <div class="main">
      <!-- 动态组件标签 -->
      <keep-alive>
        <component :is="comName" />
      </keep-alive>
    </div>

    <!-- 底部组件 -->
    <MyTabBar :tabList="list" @onChangeTab="changeCom" />
  </div>
</template>

<script>
// 导入 头部组件
import MyHeader from "./components/MyHeader.vue";
import MyTabBar from "./components/MyTabBar.vue";

// 导入 三个 页面级组件
import MyGoodsList from "./views/MyGoodsList.vue";
import MyGoodsSearch from "./views/MyGoodsSearch.vue";
import MyUserInfo from "./views/MyUserInfo.vue";

export default {
  name: "App",
  components: {
    // 功能组件
    MyHeader,
    // Header: MyHeader,
    MyTabBar,
    // 页面级组件
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo,
  },
  data() {
    return {
      // 页面级组件名称
      comName: "MyGoodsList",
      // 底部tab数据
      list: [
        {
          iconText: "icon-shangpinliebiao",
          text: "商品列表",
          componentName: "MyGoodsList",
        },
        {
          iconText: "icon-sousuo",
          text: "商品搜索",
          componentName: "MyGoodsSearch",
        },
        {
          iconText: "icon-user",
          text: "我的信息",
          componentName: "MyUserInfo",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 1.切换组件方法---------------------
    changeCom(cName) {
      this.comName = cName;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  margin-top: 50px;
}
</style>
